<template>
  <div class="container" :class="{ 'center-content': !items || items.length === 0 }">
    <div v-if="!items || items.length === 0"  >
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :sm="24" :lg="24" >
          <div class="message">
          <h1>尚未定义应用！</h1>
          <router-link to="business/application" class="create-link"><h1>创建应用</h1></router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card class="item" v-for="(item, index) in items" :key="index" @click="switchappmenu(item)">
      <template #header>{{item.applicationName}}</template>
      <img
          :src="item.icon"        style="width: 100%"
      />
    </el-card>

  <el-card class="item" v-if="items && items.length > 0"  @click="switchtotendermanager" >
  <template #header>租户信息管理</template>
    <img
      :src="tenantInfoManagement"        style="width: 100%"
    />
  </el-card>
  </div>
</template>

<script setup name="Index">
import {ref, onMounted, watch, computed, getCurrentInstance} from 'vue'
import { listApplication } from "@/api/business/application";
import {setApplicaitonCode} from "@/utils/auth";
import usePermissionStore from "@/store/modules/permission"
import router, {clearRoutes,addRoute,resetRouter} from "../router";
import { isHttp } from '@/utils/validate';
import {useRoute, useRouter} from 'vue-router';
import tenantInfoManagement from '@/assets/images/tenant-info-management.jpeg'
import useTagsViewStore from "../store/modules/tagsView";
const version = ref('3.8.6')
const items = ref([])
const route = useRoute();
const redirect = ref(undefined);
const selectedTag = ref({});
const visitedViews = computed(() => useTagsViewStore().visitedViews);
const { proxy } = getCurrentInstance();
watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

function findHomeTag() {
  for (const tag of visitedViews.value) {
    // Must have tag name
    if (tag.title=='首页') {
      return tag
    }
  }
  return null;
}

function switchappmenu(item) {

  setApplicaitonCode(item.applicationCode)
  selectedTag.value = findHomeTag();
  if (selectedTag.value) {
    closeOthersTags()
  }
  resetRouter();
  // usePermissionStore().generateRoutes();
  usePermissionStore().generateRoutes().then(accessRoutes => {
    console.log('accessRoutes：'+JSON.stringify(accessRoutes))
    // 根据roles权限生成可访问的路由表
    accessRoutes.forEach(route => {
      if (!isHttp(route.path)) {
        router.addRoute(route) // 动态添加可访问路由表
      }
    })
  })
}
function closeOthersTags() {
    router.push(selectedTag.value).catch(() => { });
    proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
      // moveToCurrentTag()
    })
}
function switchtotendermanager() {
  setApplicaitonCode("-")
  selectedTag.value = findHomeTag();
  if (selectedTag.value) {
    closeOthersTags()
  }
  resetRouter();
  usePermissionStore().generateRoutes().then(accessRoutes => {
    // 根据roles权限生成可访问的路由表
    accessRoutes.forEach(route => {
      if (!isHttp(route.path)) {
        router.addRoute(route) // 动态添加可访问路由表
      }
    })
  })
}

onMounted(() => {
  listApplication().then(response => {
    console.log(response)
    items.value = response.rows
  })
})

</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: row;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start; /* 默认左对齐 */
}
.center-content {
  justify-content: center; /* 当 items 为空时居中 */
}
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  color: #409EFF; /* 与创建应用链接颜色一致 */
}

.item {
  flex: 1;
  min-width: 240px;
  max-width: 240px;
  margin: 5px;
  background-color: white;
  text-align: center;
  padding: 10px;
}

.no-applications {
  text-align: center;
  color: green;
  margin-bottom: 20px;
}

.create-link {
  margin-left: 10px;
  color: #409EFF;
  text-decoration: none;
}

.create-link:hover {
  text-decoration: underline;
}
</style>

